<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>查件</title>
    <!-- Bootstrap -->
    <link href="../bots/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    	<div class="search">
	    	<div class="form-group has-success has-feedback">
			  <div class="input-group">
			    <span class="input-group-addon search-font">
			    	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
			    </span>
			    <input type="text" class="form-control search-input" id="" aria-describedby="" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请输入快递单号搜索">
			  </div>  
			</div>
	    </div>

	    <!-- 查到的件 -->
	   <div class="info">
	   		<div class="time-info">2020年8月15日 17:30</div>
			<div class="div-bg">
			   	<div class="content-info">
			   	<p>村通单号：
			   	<span  class="blue" name="c1">11111111111111111</span>
			   	<span  class="glyphicon glyphicon-duplicate copy"  aria-hidden="true"></span>
			   	<span  class="glyphicon glyphicon-ok-circle status success-status" aria-hidden="true"></span></p>
			   	<p>中通快递单号：
			   	<span  class="blue" name="o1">2222222222222222</span>
			   	<span  class="glyphicon glyphicon-duplicate copy" aria-hidden="true"></span></p>
			   	<p>收件人：
			   	<span class="people-info p-name">王XX</span><span class="people-info p-tel">手机号：12311234567</span></p>
			   	</div>
		   </div>
	   </div>
	   <div class="info">
	   		<div class="time-info">2020年8月15日 17:30</div>
			<div class="div-bg">
			   	<div class="content-info">
			   	<p>村通单号：
			   	<span class="blue" name="c2">33333333333333333</span>
			   	<span class="glyphicon glyphicon-duplicate copy" aria-hidden="true"></span><span class="glyphicon glyphicon-remove-circle status error-status" aria-hidden="true"></span></p>
			   	<p>百世快递单号：
			   	<span class="blue" name="o2">444444444444444444444</span>
			   	<span  class="glyphicon glyphicon-duplicate copy" aria-hidden="true"></span></p>
			   	<p>收件人：<span class="people-info p-name">张三丰</span><span class="people-info p-tel">手机号：19876543211</span></p>
			   	</div>
		   </div>
	   </div>
	  
	   <!-- 底部 -->
	   <div class="div-bg bottom">
	    <table class="table ji_table table_3">		   
			<tr class="bottom-tab">
		    	<td>
		    		<div class="bottom-tab"><span class="glyphicon glyphicon-search tab" aria-hidden="true" value="./find.html"></div>
		    		<div class="bottom-tab" >查件</div>
		    	</td>
				<td>
					<div class="bottom-tab"><span class="glyphicon glyphicon-send tab" aria-hidden="true" value="./index.html"></div>
		    		<div class="bottom-tab">寄件</div>
				</td>
				<td>
					<div class="bottom-tab"><span class="glyphicon glyphicon-user tab" aria-hidden="true" value="./find.html"></div>
		    		<div class="bottom-tab">我的</div>
				</td>
			</tr>
	    </table>
	    </div>




    <script src="../bots/js/clip/dist/clipboard.min.js"></script>


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
 <script type="text/javascript"> 
 
// 复制
	$(".copy").click(function(){
		var copyi = $(this);
		var str = copyi.prev().text();
		var clipboard = new ClipboardJS('.copy',{
		    text: function(trigger) {
		       return str;
		    }
		});
			clipboard.on('success', function(e) {
				copyi.addClass('actives');
		    });
			clipboard.on('error', function(e) {
		       alert('请重新复制');
		    });

		});

     
// 图标点击变色
	 var tab=document.getElementsByClassName("tab");
     var l=tab.length;
     for(var i=0;i<l;i++){
         tab[i].onclick=function(){
             for(var j=0;j<l;j++){
                 if(this==tab[j]){
                     this.style.color="#5AA6FB";
                     var url = $(this).attr("value");
                     window.location.href=url;
                 }else{
                     tab[j].style.color="";
                 }
 
             }   
        }
     }
		
    
 </script>
	
</html>
